<template>
    <page-view class="detail-page">
        <page-header title="菜品详情" :show-back="true"></page-header>
        <div class="content-box" v-if="foods_detail">
            <div class="img-box">
                <img v-lazy="baseURL+foods_detail.img" alt="" @click="preImg(foods_detail.img)">
                <div class="add" @click="addShopCar">
                    <span class="iconfont icontianjia"></span>
                    <span>购物车</span>
                </div>
            </div>
            <ul class="info-box">
                <li class="foods-name">
                    <span>菜品名称：</span>
                    <span>{{foods_detail.fname}}</span>
                </li>
                <li class="price">
                    <span>菜品价格：</span>
                    <span>￥{{foods_detail.price}}</span>
                </li>
                <li class="salecount">
                    <span>售卖份数：</span>
                    <span>{{foods_detail.salecount}}</span>
                </li>
                <li class="windos-name">
                    <span>窗品名称：</span>
                    <span>{{foods_detail.windos.wname}}</span>
                </li>
                <li class="intro">
                    <span>{{foods_detail.intro}}</span>
                </li>
            </ul>
            <div class="comments-box">
                <h2>最新评论</h2>
                <small-loading v-if="haveLoading"></small-loading>
                <p class="empty" v-if="!foods_comments">暂无评论</p>
                <div v-if="foods_comments">
                    <div class="comment-item" v-for="(item,index) in foods_comments" :key="index">
                        <div class="user-box">
                            <span class="user-name">{{item.user.name}}</span>
                            <span class="ctime">{{item.ctime | framDate}}</span>
                        </div>
                        <div class="comment">{{item.cont}}</div>
                    </div>
                </div>
            </div>
        </div>
        <shop-car-bar ></shop-car-bar>
    </page-view>
</template>
<script>
    import ShopCarBar from "../components/ShopCarBar"
    import {
        FramDate
    } from "@/utils/FramDate";
    import {
        mapActions,
        mapState
    } from "vuex";
    import SmallLoading from "@/components/SmallLoading"
    export default {
        name: "FoodsDetails",
        created() {
            this.getFoodsDetailById(this.$route.query.fid);
            this.getFoodsComments(this.$route.query.fid);
        },
        filters: {
            framDate: FramDate
        },
        components: {
            SmallLoading,
            ShopCarBar
        },
        computed: {
            ...mapState(['userInfo'])
        },
        methods: {
            ...mapActions(["addShopCarList", "preImgShowOrHide"]),
            async getFoodsDetailById(fid) {
                let Msgloading = this.$msg.loading({
                    title: "正在加载中",
                    duration: -1,
                    hasMask: true,
                    position: "center"
                });
                try {
                    let result = await this.$api.foods.getFoodsDetailById(fid);
                    if (result.code == 1) {
                        this.foods_detail = result.data;
                    }
                } catch (error) {
                    console.log(error);
                } finally {
                    Msgloading.close();
                }
            },
            async getFoodsComments(fid) {
                try {
                    let result = await this.$api.comments.getFoodsComments(fid);
                    if (result.code == 1) {
                        this.foods_comments = result.data;
                    }
                } catch (error) {
                    console.log(error);
                } finally {
                    this.haveLoading = false;
                }
            },
            addShopCar() {
                if (this.userInfo) {
                    this.addShopCarList({
                        count: 1,
                        ...this.foods_detail
                    });
                } else {
                    this.$msg.info({
                        title: "请先登录",
                        duration: 1500,
                        hasMask: true,
                        position: "center"
                    });
                    setTimeout(() => {
                        this.$router.push({
                            name: "Login"
                        });
                    }, 1500);
                }
            },
            preImg(imgURL) {
                this.preImgShowOrHide([imgURL]);
            }
        },
        data() {
            return {
                foods_detail: null,
                foods_comments: null,
                haveLoading: true
            }
        }
    }
</script>
<style lang="scss" scoped>
    .detail-page {
        @include flexbox(column);

        .content-box {
            flex: 1;
            overflow: auto;
            padding-bottom: 60px;

            .img-box {
                width: 100%;
                height: 250px;
                position: relative;

                >img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .add {
                    background-color: rgba(255, 255, 255, 0.6);
                    width: 80px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    border-radius: 15px;
                    color: $primaryColor;
                    font-weight: bold;

                    .iconfont {
                        margin-right: 5px;
                    }
                }
            }

            .info-box {
                @include flexbox(column);
                margin: 10px;
                border-bottom: 1px solid #ececec;
                line-height: 28px;
                font-size: 16px;
                padding-bottom: 10px;

                li span:nth-child(1) {
                    font-weight: bold;
                }

                li:last-child {
                    span {
                        font-weight: normal;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
                        // 文本缩进2格文字
                        text-indent: 2em;
                    }
                }
            }

            .comments-box {
                margin: 10px;

                .empty {
                    width: 100%;
                    text-align: center;
                    margin-top: 20px;
                    font-size: 14px;
                    color: #8080A1;
                }

                .comment-item {
                    font-size: 14px;
                    border-bottom: 1px solid #ececec;

                    .user-box {
                        width: 100%;
                        height: 40px;
                        @include flexbox(row, space-between, center);

                        .user-name {
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
</style>